import { Col, Row } from 'antd';
import TargetCuesTopicCard from './components/TargetCuesTopicCard';
import TargetCuesActiveCard from './components/TargetCuesActiveCard';
import TargetTotalCard from './components/TargetTotalCard';
import TargetTopicSubmitCard from './components/TargetTopicSubmitCard';

interface TargetGroupProps { }

const TargetGroup: React.FC<TargetGroupProps> = ({ }) => {
  const topColResponsiveProps = {
    xs: 24,
    sm: 18,
    md: 12,
    lg: 12,
    xl: 8,
    style: { marginBottom: 24 ,padding:window.innerWidth<400?'0px':'12px'},
  };

  return (
    <Row gutter={24} >
      <Col {...topColResponsiveProps} >
        <TargetTotalCard />
      </Col>
      {/* <Col {...topColResponsiveProps}>
        <TargetCuesTopicCard />
      </Col> */}
      <Col {...topColResponsiveProps}>
        <TargetTopicSubmitCard />
      </Col>
      <Col {...topColResponsiveProps} >
        <TargetCuesActiveCard />
      </Col>
    </Row>
  );
};

export default TargetGroup;
